import React, { FC } from 'react'
import './QuestionCard.css'
type Propstype = {
  id: string
  title: string
  isPublished: boolean
  deleteQuestion?: (id: string) => void
  publishQuestion?: (id: string) => void
}

const QuestionCard: FC<Propstype> = props => {
  const { id, title, isPublished, deleteQuestion, publishQuestion } = props
  const edit = (id: string) => {
    console.log(id)
  }
  const del = (id: string) => {
    console.log(id)
    deleteQuestion && deleteQuestion(id)
  }
  const pub = (id: string) => {
    publishQuestion && publishQuestion(id)
  }

  return (
    <div key={id} className="list-item">
      <strong>{title}</strong>
      &nbsp;
      {/* 条件判断 */}
      {isPublished ? <span style={{ color: 'green' }}>已发布</span> : <span>未发布</span>}
      &nbsp;
      <button
        onClick={() => {
          edit(id)
        }}
      >
        编辑问卷
      </button>
      &nbsp;
      <button
        onClick={() => {
          del(id)
        }}
      >
        删除问卷
      </button>
      &nbsp;
      <button
        onClick={() => {
          pub(id)
        }}
      >
        发布问卷
      </button>
    </div>
  )
}
export default QuestionCard
